//----------------------------
//
//  mixins.less v0.1.5
//  http://mixinsless.com/
//  Reuse snippets & Cross-browser private properties snippets.
//----------------------------

// Border radius with the same argument
// -------------------------
.rounded(@radius: 3px) {
    -webkit-border-radius:@radius;
    -moz-border-radius:@radius;
    border-radius:@radius;
    -webkit-background-clip:padding-box;
    -moz-background-clip:padding-box;
    background-clip:padding-box;
}

// Border radius with different arguments
// -------------------------
.border-radius(@topleft: 0, @topright: 0, @bottomright: 0, @bottomleft: 0) {
    -webkit-border-top-left-radius:@topleft;
    -webkit-border-top-right-radius:@topright;
    -webkit-border-bottom-right-radius:@bottomright;
    -webkit-border-bottom-left-radius:@bottomleft;
    -moz-border-radius-topleft:@topleft;
    -moz-border-radius-topright:@topright;
    -moz-border-radius-bottomright:@bottomright;
    -moz-border-radius-bottomleft:@bottomleft;
    border-top-left-radius:@topleft;
    border-top-right-radius:@topright;
    border-bottom-right-radius:@bottomright;
    border-bottom-left-radius:@bottomleft;
    -webkit-background-clip:padding-box;
    -moz-background-clip:padding-box;
    background-clip:padding-box;
}

// Background size
// -------------------------
.background-size(@size) {
    -webkit-background-size:@size;
    -moz-background-size:@size;
    -o-background-size:@size;
    background-size:@size;
}

// Opacity
// -------------------------
.opacity(@opacity) {
    opacity:@opacity;
    @opacityIE : @opacity * 100;
    filter:~"alpha(opacity=@{opacityIE})";
}

// Appearance
// -------------------------
.appearance(@appearance:none) {
    -webkit-appearance:@appearance;
    appearance:@appearance;
}

// Gradient
// -------------------------
.gradient(@start: #000000, @stop: #FFFFFF) {
    background:(@start + @stop)/2;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0, @start), color-stop(1, @stop));
    background:-moz-linear-gradient(center top, @start 0%, @stop 100%);
}

// Box shadow
// -------------------------
.drop-shadow(@horizontal: 0, @vertical: 1px, @blur: 2px, @alpha: 0.1) {
    -webkit-box-shadow:@horizontal @vertical  @blur rgba(0, 0, 0, @alpha);
    -moz-box-shadow:@horizontal @vertical  @blur rgba(0, 0, 0, @alpha);
    box-shadow:@horizontal @vertical  @blur rgba(0, 0, 0, @alpha);
}

// Box shadow inset
// -------------------------
.inner-shadow(@horizontal: 0, @vertical: 1px, @blur: 2px, @alpha: 0.4) {
    -webkit-box-shadow:inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
    -moz-box-shadow:inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
    box-shadow:inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
}

// Box inner border
// -------------------------
.inner-border(@width: 1px, @color: #000) {
    -webkit-box-shadow:inset 0 0 0 @width @color;
    -moz-box-shadow:inset 0 0 0 @width @color;
    box-shadow:inset 0 0 0 @width @color;
}

// Box shadow default
// -------------------------
.box-shadow(@arguments) {
    -webkit-box-shadow:@arguments;
    -moz-box-shadow:@arguments;
    box-shadow:@arguments;
}

// Animation
// -------------------------
.animation(@animation) {
    -webkit-animation:@animation;
    -moz-animation:@animation;
    animation:@animation;
}

.transition(@transition) {
    -webkit-transition:@transition;
    -moz-transition:@transition;
    -o-transition:@transition;
    transition:@transition;
}
.transition-delay(@transition-delay) {
    -webkit-transition-delay:@transition-delay;
    -moz-transition-delay:@transition-delay;
    -o-transition-delay:@transition-delay;
    transition-delay:@transition-delay;
}
.transition-duration(@transition-duration) {
    -webkit-transition-duration:@transition-duration;
    -moz-transition-duration:@transition-duration;
    -o-transition-duration:@transition-duration;
    transition-duration:@transition-duration;
}

// Transform
// -------------------------
.transform(@arguments) {
    -webkit-transform:@arguments;
    -moz-transform:@arguments;
    transform:@arguments;
}

// Transform rotation
// -------------------------
.rotation(@deg:5deg) {
    -webkit-transform:rotate(@deg);
    -moz-transform:rotate(@deg);
    transform:rotate(@deg);
}

// Transform scale
// -------------------------
.scale(@ratio:1.5) {
    -webkit-transform:scale(@ratio);
    -moz-transform:scale(@ratio);
    transform:scale(@ratio);
}

// Translate
// -------------------------
.translate(@x:0, @y:0) {
    -moz-transform:translate(@x, @y);
    -webkit-transform:translate(@x, @y);
    -o-transform:translate(@x, @y);
    -ms-transform:translate(@x, @y);
    transform:translate(@x, @y);
}

// Translate3d
// -------------------------
.translate3d(@x, @y, @z) {
    -webkit-transform:translate3d(@x, @y, @z);
    -moz-transform:translate3d(@x, @y, @z);
    -o-transform:translate3d(@x, @y, @z);
    transform:translate3d(@x, @y, @z);
}

// Background clipping
// -------------------------
.background-clip(@clip) {
    -webkit-background-clip:@clip;
    -moz-background-clip:@clip;
    background-clip:@clip;
}

// CSS columns
// -------------------------
.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEEEEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) {
    -moz-column-width:@colwidth;
    -moz-column-count:@colcount;
    -moz-column-gap:@colgap;
    -moz-column-rule-color:@columnRuleColor;
    -moz-column-rule-style:@columnRuleStyle;
    -moz-column-rule-width:@columnRuleWidth;
    -webkit-column-width:@colwidth;
    -webkit-column-count:@colcount;
    -webkit-column-gap:@colgap;
    -webkit-column-rule-color:@columnRuleColor;
    -webkit-column-rule-style:@columnRuleStyle;
    -webkit-column-rule-width:@columnRuleWidth;
    column-width:@colwidth;
    column-count:@colcount;
    column-gap:@colgap;
    column-rule-color:@columnRuleColor;
    column-rule-style:@columnRuleStyle;
    column-rule-width:@columnRuleWidth;
}

// Import font
// -------------------------
.font-face(@fontFamily, @fileName, @style, @weight) {
    @font-face{
        font-family:@fontFamily;
        font-style:@style;
        font-weight:@weight;
        src:url('@{fileName}.eot');
        src:local('@fontFamily'), url('@{fileName}.eot?#iefix') format('embedded-opentype'), url('@{fileName}.woff') format('woff'), url('@{fileName}.ttf') format('truetype'), url('@{fileName}.svg#@{fontFamily}') format('svg'), url("@{fileName}.otf") format('opentype');
    }
}

// Clearfix
// -------------------------
.clearfix() {
    zoom:1;
    &:before{
        content:'';
        display:block;
    }
    &:after{
        content:'';
        display:table;
        clear:both;
    }
}

// CSS image replacement
// -------------------------
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
.hide-text() {
    font:0/0 a;
    color:transparent;
    text-shadow:none;
    background-color:transparent;
    border:0;
}

// Force line breaks
// -------------------------
.word-break() {
    word-break:break-all;
    word-wrap:break-word;
    white-space: normal;
}

// No wrap
// -------------------------
.no-wrap() {
    word-break: normal;
    word-wrap: normal;
    white-space: nowrap;
}

// Text overflow with(...)
// -------------------------
// Requires inline-block or block for proper styling
.text-overflow() {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:100%;
}

.line-overflow(@line) {
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:@line; /* number of lines to show */
    -webkit-box-orient:vertical;
}

// Creates a wrapper for a series of columns
// -------------------------
.lay-row() {
    // Negative margin the row out to align the content of columns
    margin-left:  (@grid-gutter-width / -2);
    margin-right: (@grid-gutter-width / -2);
    // Then clear the floated columns
    .clearfix();
}

// Generate the columns
// -------------------------
.lay-column(@columns) {
    @media (min-width: @grid-float-breakpoint) {
        float: left;
        // Calculate width based on number of columns available
        width: percentage(@columns / @grid-columns);
    }
    // Prevent columns from collapsing when empty
    min-height: 1px;
    // Set inner padding as gutters instead of margin
    padding-left:  (@grid-gutter-width / 2);
    padding-right: (@grid-gutter-width / 2);
}

// Generate the column offsets
// -------------------------
.lay-column-offset(@columns) {
    @media (min-width: @grid-float-breakpoint) {
        margin-left: percentage((@columns / @grid-columns));
    }
}

// Alpha background
// -------------------------
.alpha-background(@rgb:#000,@alpha:.5){
    @rgba-color:fade(@rgb,@alpha*100);
    @argb-color:argb(@rgba-color);
    background-color:@rgba-color;
    filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{argb-color}', endColorstr='@{argb-color}', GradientType=0)\9";
    zoom:1;
}

// Controls the selection model of an element.
// -------------------------
.user-select(@arguments:none){
    -webkit-user-select: @arguments;
    -moz-user-select: @arguments;
    -ms-user-select: @arguments;
    user-select: @arguments;
}

// Flexbox display
// -------------------------
// flex or inline-flex
.flex-display(@display: flex) {
    display: ~"-webkit-@{display}";
    display: ~"-moz-@{display}";
    display: @display;
}

/*=========透明=========*/
.background-color(@r,@g,@b,@a){
    background-color: rgba(@r,@g,@b,@a);
}

/*========= 圆角 =========*/
.border-radius(@px){
    border-radius: @px;
}

/*========= 边框 =========*/
.border(@color,@width:1px,@style:solid){
    border: @width @color @style;
}

/*========= 按钮 =========*/
.base-btn(@color,@font-size,@h,@w,@display:inline-block){
    color: @color;
    font-size: @font-size;
    display: @display;
    width: @w;
    text-align: center;
    height: @h;
    line-height: @h;
    border-radius: @h / 2;
    font-weight: bold;
}

/*========= color =========*/
@color-fff: #fff;
@color-666: #666;
@color-999: #999;
@color-ddd: #ddd;
@color-4F8FD6: #4F8FD6;
@color-ff7200: #ff7200;
@color-FF546C: #FF546C;
@color-004e97: #004e97;
@color-3681d6: #3681d6;
@color-f03f37: #f03f37;
@color-1690ed: #1690ed;
/*========= color end =========*/


/*========= font size =========*/
@font-size36: 36px;
@font-size32: 32px;
@font-size30: 30px;
@font-size28: 28px;
@font-size26: 26px;
@font-size24: 24px;
@font-size22: 22px;
@font-size20: 20px;
@font-size18: 18px;
@font-size16: 16px;
@font-size14: 14px;
/*========= font size end =========*/
